<template>
    <div id="index">
        <el-row :gutter="10" style="margin-top:10px;">
			<el-col :lg="{span:4}" :xs="0">
				<div style="visibility: hidden;">a</div>
			</el-col>
            
			<el-col :lg="{span:6}" :xs="24">
                <div class="grid-content bg-purple">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix sender">
                            <span>个人中心</span>
                        </div>
                        <div class="sender">

                            <el-upload
                                    action="http://localhost:8080/user/upphoto"
                                    multiple
                                    :data="name"
                                    :limit="3"
                                    :show-file-list="false"
                                    :on-success="refreshPhoto"
                                    >

                                <img class="fl avator-img" id="js-portrait" v-bind:src= "dataForm.head"
                                 data-portrait="58492fe600012e8e01800180" width="180" height="180">

                            </el-upload>

                        </div>
                        <el-divider></el-divider>
                        <div class="name-role">
                            <span class="sender" style="color: #999">{{dataForm.name}}</span>
                        </div>
                        <div class="registe-info">
                            <!--<span class="registe-info">-->
                              <!---->
                            <!--</span>-->
                            <div class="info-btn">
                                <el-button type="primary" size="small" @click="turnToCollection">我的收藏</el-button>
                                <el-button type="primary" size="small" @click="turnToHistory">浏览历史</el-button>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div class="name-role">
                            <span class="sender"> 我的论坛 </span>
                        </div>
                        <div v-for="art in article">
                            <div class="personal-relation">
                                <div class="relation-item"><div style="float: left; padding-right:20px;font-size: 14px;"><a @click="turnToForum(art['forumID'])">{{ limitLength(art["title"],15)}}</a></div></div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
			
			<el-col :lg="{span:10}" :xs="24">
			    <div class="grid-content bg-purple">
					
					<el-col :lg="{span:1}" :xs="0">
						<div style="visibility: hidden;">a</div>
					</el-col>
			        <el-card class="box-card">
			            <div slot="header" class="clearfix sender">
			                <span>基本资料</span>
			            </div>
			            <div>
			                <el-form label-width="80px" :data="dataForm" size="small" label-position="right">
			                    <!--<el-form-item label="昵称" prop="nickName">-->
			                        <!--<el-input  auto-complete="off" v-model="dataForm.nickName"></el-input>-->
			                    <!--</el-form-item>-->
			                    <el-form-item label="用户名" prop="name">
			                        <el-input  auto-complete="off" v-model="dataForm.name" :disabled="true"></el-input>
			                    </el-form-item>
			                    <el-form-item label="性别" prop="sex">
			                        <el-select v-model="dataForm.sex" placeholder="请选择" style="float: left;">
			                            <el-option v-for="item in options" :key="item" :value="item"></el-option>
			                        </el-select>
			                    </el-form-item>
			                    <el-form-item label="年龄" prop="age">
			                        <el-input auto-complete="off" v-model="dataForm.age"></el-input>
			                    </el-form-item>
			                    <el-form-item label="号码" prop="phone">
			                        <el-input auto-complete="off" v-model="dataForm.phone" :disabled="true"></el-input>
			                    </el-form-item>
			                    <el-form-item label="邮箱" prop="email">
			                        <el-input auto-complete="off" v-model="dataForm.email" :disabled="true"></el-input>
			                    </el-form-item>
			                    <el-form-item label="职位" prop="job">
			                        <el-input auto-complete="off" v-model="dataForm.job"></el-input>
			                    </el-form-item>
			                    <el-form-item label="公司" prop="company">
			                        <el-input auto-complete="off" v-model="dataForm.company"></el-input>
			                    </el-form-item>
			                    <el-form-item label="学历" prop="education">
			                        <el-input auto-complete="off" v-model="dataForm.education"></el-input>
			                    </el-form-item>
			                    <el-form-item label="简介" prop="simpleInfo">
			                        <el-input auto-complete="off" v-model="dataForm.simpleInfo"></el-input>
			                    </el-form-item>
			                </el-form>
			                <div slot="footer"  class="dialog-footer sender">
			                    <el-button size="mini" type="primary" @click="save">保存修改</el-button>
			                </div>
			            </div>
			        </el-card>
			    </div>
			</el-col>
			<el-col :lg="{span:4}" :xs="0">
				<div style="visibility: hidden;">a</div>
			</el-col>
		</el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        created(){
            if(window.localStorage.getItem('token')==''||window.localStorage.getItem('token')==undefined)
                this.$router.replace('/');
            window.document.body.style.backgroundColor='rgb(199, 219, 241)';
            this.dataForm.name = window.localStorage['username'];
            this.request({
                url:'/personalInfo/'+this.dataForm.name,
            }).then(res=>{
                res.data['head'] = 'http://localhost:8080/'+res.data['head'];
                this.dataForm = res.data;
            }).catch(err=>{
                console.log(err);
            });
            this.request({
                url:'/personalArticle/'+this.dataForm.name,
            }).then(res=>{
                this.article= res.data;
                //console.log('article'+this.article);
            }).catch(err=>{
                console.log(err);
            });
        },
        beforeRouteLeave(to,from,next){
            window.document.body.style.backgroundColor='';
            next();
        },
        data(){
            return{
                dataForm: {
                    id: 0,
                    head:require('@/assets/admin.jpg'),
                    // nickName: '',
                    name: 'user',
                    sex: '男',
                    age: 20,
                    phone: '17808042846',
                    email: '2963876107@qq.com',
                    job: 'student',
                    company: 'JLU',
                    education: '本科',
                    simpleInfo: '太卷了太卷了，卷不动了',
                    article: '1'
                },
                options: [
                    '女','男','保密'
                ],
                article: [
					{
						'content':'10',
						'title':'如何才能避免夏零营'
					},
					{
						'content':'20',
						'title':'防卷手册'
					},
					{
						'content':'30',
						'title':'防卷指南'
					},
					{
						'content':'30',
						'title':'卷王竟在我身边'
					}
                ],
                name:{'userName':window.localStorage['username']}
            }
        },
        methods: {
            save() {
                let url = 'http://localhost:8080/personalInfo/save';
                axios.post(url, this.dataForm).then(
                    res=>{
                        alert("保存成功！");
                        location.reload(true);
                        console.log(res.data);
                    }).catch(err=>{
                        console.log(err);
                    }
                )
            },
            turnToForum(articleID){
                this.$router.push({
                    path:'/forumcontent',
                    query:{
                        forumID:articleID
                    }}).catch(error=>error);
            },
            refreshPhoto(){
                this.dataForm.head = 'http://localhost:8080/img/header/'+this.dataForm.name+'.jpg?'+this.getRandomInt(0,100);
				//http://localhost:8080//img/header/test3.jpg
            },
            turnToHistory(){
                this.$router.push('/history')
            },
            turnToCollection(){
                this.$router.push('/collection')
            },
            getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
            limitLength(content,limit){
                if(content.length <= limit){
                    return content;
                }
                return content.substr(0,limit+1)+'...';
            }
        }
    }
</script>

<style lang="scss" scoped>
    #index{
        margin-left: 20px;
        margin-right: 20px;
    }
    a{
        text-decoration: none;
    }

    //卡片样式
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 99.5%;
    }
    //文本样式区
    .name-role {
        font-size: 16px;
        padding: 5px;
        text-align:center;
    }
    .sender{
        text-align:center;
    }
    .registe-info{
        text-align: center;
        padding-top:10px;
    }
    .personal-relation {
        font-size: 16px;
        padding: 0px 5px 15px;
        margin-right: 1px;
        width: 100%
    }

    .relation-item {
        padding: 12px;

    }
    .dialog-footer{
        padding-top:10px ;
        padding-left: 10%;
    }
    //布局样式区
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .el-input{
        width: 80%;
        float: left;
    }
    .sender img{
        object-fit:cover;
    }
    a{
        cursor: pointer;
    }
    .info-btn>button{
        margin-right: 20px;
        margin-left: 20px;
    }
	
	.el-col {
	  border-radius: 4px;
	}
	.bg-purple-dark {
	  background: #99a9bf;
	}
	.bg-purple {
	  background: #d3dce6;
	}
	.bg-purple-light {
	  background: #e5e9f2;
	}
	.grid-content {
	  border-radius: 4px;
	  min-height: 36px;
	}
</style>

<!-- 两侧加个只在网页上才显示的 div ，具体参考侧边栏 -->
